<template>
  <div id="layout">
      <div id="header">
        <user-account></user-account>
        <top-nav></top-nav>
      </div>
      <div id="body">
        <div class="sidebar-panel">
          <sidebar-nav></sidebar-nav>
        </div>
        <div class="user-panel">
          <cleave
            class="input"
            placeholder="Enter phone number"
            :options="{ blocks: [0, 3, 3, 4], numericOnly: true, delimiters: ['(', ') ', '-'], maxLength: 14 }">
          </cleave>
        </div>
        <div class="inner-panel">
          <div class="chat-panel"></div>
          <div class="content-panel"></div>
        </div>
      </div>
  </div>
</template>

<script>
  import UserAccount from '@/components/UserAccount'
  import TopNav from '@/components/TopNav'
  import SidebarNav from '@/components/SidebarNav'
  import Cleave from 'vue-cleave'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      UserAccount,
      TopNav,
      SidebarNav,
      Cleave
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #layout{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    position: fixed;
    #header{
      height: 60px;
      background: #ef6262;
      border-bottom: 1px solid #d43b3b;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-content: center;
    }
    #body{
      position: absolute;
      left: 0;
      right: 0;
      top: 61px;
      bottom: 0;
      .sidebar-panel {
        width: 58px;
        background: #3d3c3c;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
      }
      .user-panel {
        width: 275px;
        background: #f8f8f8;
        border-right: 1px solid #bcbcbc;
        position: absolute;
        top: 0;
        left: 59px;
        bottom: 0;
      }
      .inner-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 335px;
        display: flex;
        justify-content: stretch;
        flex-direction: row;
        .chat-panel {
          width: 60%;
        }
        .content-panel {
          background: #f8f8f8;
          border-left: 1px solid #bcbcbc;
          width: 40%;
        }
      }
    }
  }
</style>
